<template>
  <a-modal
    :title="title"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="hideModal"
    :maskClosable="false"
    style="overflow: hidden;"
    :bodyStyle="{ maxHeight: '520px', overflow: 'auto' }"
    destroyOnClose
    width="750px"
  >
    <a-form-model
      :model="formData"
      :rules="rules"
      ref="myForm"
      :style="{ width: '100%' }"
      layout="horizontal"
      v-bind="{
        labelCol: { span: 4 },
        wrapperCol: { span: 20 }
      }"
      :colon="true"
      labelAlign="right"
    >
      <a-row style="height: 100%">
        <a-col :span="24">
          <a-form-model-item label="上级目录" prop="pName" extra="" v-bind="{}">
            <lz-text :value="p.title || '无'"></lz-text>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="名称" prop="title" extra="" v-bind="{}">
            <a-input
              v-model="formData.title"
              placeholder=""
              :allowClear="true"
              size="default"
              :disabled="false"
            ></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24" v-if="!formData.id">
          <a-form-model-item label="类型" prop="menuType" extra="" v-bind="{}">
            <a-radio-group v-model="formData.menuType" button-style="solid" size="default">
              <a-radio-button :disabled="opt.disabled" v-for="(opt, idx) in type_options" :key="idx" :value="opt.value">
                {{ opt.label }}
              </a-radio-button>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="24" v-if="formData.menuType == '2'">
          <a-form-model-item label="路由" prop="path" extra="" v-bind="{}">
            <a-input
              v-model="formData.path"
              placeholder=""
              :allowClear="true"
              size="default"
              :disabled="false"
            ></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24" v-if="formData.menuType == '3'">
          <a-form-model-item label="权限标识" prop="authCode" extra="" v-bind="{}">
            <a-input
              v-model="formData.authCode"
              placeholder=""
              :allowClear="true"
              size="default"
              :disabled="false"
            ></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24" v-if="formData.menuType !== '3'">
          <a-form-model-item label="图标" prop="icons" extra="" v-bind="{}">
            <a class="svgIcon" v-if="formData.icons">
              <a-icon :component="menuIcons[formData.icons]" style="font-size:20px;" />
            </a>
            <selectIcon @change="handleIconChange" />
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="顺序号" prop="seq" extra="" v-bind="{}">
            <a-input-number
              style="width:100%"
              v-model="formData.seq"
              placeholder=""
              size="default"
              :disabled="false"
              decimalSeparator="."
              :precision="0"
              step="10"
              :max="999999999"
              :min="0"
            >
            </a-input-number>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
import menuIcons from '@/utils/menuIcons'
import selectIcon from './selectIcon'
import { add, get, upd } from '@/api/sys/menu.js'
import * as utils from '@/utils/util'
export default {
  name: 'Edit',
  components: { selectIcon },
  props: [],
  data () {
    return {
      menuIcons,
      visible: false,
      title: '添加/编辑',
      confirmLoading: false,
      defaultFormData: {
        id: null,
        title: '',
        menuType: '1',
        path: '',
        authCode: '',
        icons: '',
        seq: '',
        isHidden: 0
      },
      p: {
        id: null,
        name: null,
        lv: -1
      },
      formData: Object.assign({}, this.defaultFormData),
      rules: {
        name: [
          {
            required: true,
            message: '名称不能为空',
            trigger: 'blur'
          },
          {
            max: 10,
            message: '名称最大长度不能大于10',
            trigger: 'blur'
          }
        ],
        menuType: [
          {
            required: true,
            message: '功能类型不能为空',
            trigger: 'change'
          }
        ],
        path: [
          {
            required: true,
            message: '路由不能为空',
            trigger: 'blur'
          },
          {
            max: 50,
            message: '路由最大长度不能大于50',
            trigger: 'blur'
          }
        ],
        authCode: [
          {
            required: true,
            message: '权限标识不能为空',
            trigger: 'blur'
          },
          {
            max: 50,
            message: '权限标识最大长度不能大于50',
            trigger: 'blur'
          }
        ],
        icons: [
          {
            required: true,
            message: '图标不能为空',
            trigger: 'change'
          }
        ],
        seq: [
          {
            required: true,
            message: '顺序号不能为空',
            trigger: 'blur'
          }
        ],
        remark: [
          {
            max: 255,
            message: '备注最大长度不能大于255',
            trigger: 'blur'
          }
        ]
      },
      type_options: [
        {
          label: '目录',
          value: '1',
          disabled: false
        },
        {
          label: '路由',
          value: '2',
          disabled: false
        },
        {
          label: '权限',
          value: '3',
          disabled: false
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    handleIconChange (icon) {
      this.formData.icons = icon
    },
    showModal (id, p) {
      this.p = p

      if (id) {
        this.title = '编辑'
        get({ id: id }).then(res => {
          if (res.code === 1) {
            this.formData = utils.mergeObjSamePro(this.defaultFormData, res.data)
            this.formData.menuType += ''
          }
        })
      } else {
        this.title = '添加'
        this.formData = Object.assign({}, this.defaultFormData)

        if (this.p.id === 0) {
          this.type_options = [
            {
              label: '目录',
              value: '1',
              disabled: false
            },
            {
              label: '路由',
              value: '2',
              disabled: true
            },
            {
              label: '权限',
              value: '3',
              disabled: true
            }
          ]
        }
        if (this.p.menuType === 1) {
          this.type_options = [
            {
              label: '目录',
              value: '1',
              disabled: false
            },
            {
              label: '路由',
              value: '2',
              disabled: false
            },
            {
              label: '权限',
              value: '3',
              disabled: true
            }
          ]
        }
        if (this.p.menuType === 2) {
          this.type_options = [
            {
              label: '目录',
              value: '1',
              disabled: true
            },
            {
              label: '路由',
              value: '2',
              disabled: true
            },
            {
              label: '权限',
              value: '3',
              disabled: false
            }
          ]
          this.formData.menuType = '3'
        }
      }
      this.visible = true
    },
    hideModal () {
      this.confirmLoading = false
      this.visible = false
    },
    handleOk () {
      this.confirmLoading = true
      this.$refs['myForm'].validate(valid => {
        if (!valid) {
          this.confirmLoading = false
          console.log('error')
        } else {
          this.formData.pid = this.p.id || 0
          if (this.formData.id) {
            upd(this.formData)
              .then(res => {
                this.confirmLoading = false
                if (res.code === 1) {
                  this.$message.success('修改成功')
                  this.$emit('search')
                  this.hideModal()
                }
              })
              .catch(e => {
                this.confirmLoading = false
              })
          } else {
            add(this.formData)
              .then(res => {
                this.confirmLoading = false
                if (res.code === 1) {
                  this.$message.success('保存成功')
                  this.$emit('search', { pageNumber: 1 })
                  this.hideModal()
                }
              })
              .catch(e => {
                this.confirmLoading = false
              })
          }
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
/*复选框样式*/
.ant-checkbox-wrapper + .ant-checkbox-wrapper {
  margin-left: 0px;
}
.svgIcon {
  background-color: #001529;
  margin: 10px;
  padding: 10px;
}
</style>
